iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Software Development

Python GUI 專案設計模式及好用的開發技巧系列 第 11

純手工打造UART版資料清洗工具之 Pyside2 GUI 大補帖 - Part A

  • 分享至 

  • xImage
  •  

筆者想要在網路上實在很難找到好用又齊全的PySide2教學大全,那乾脆自己做一份自己想要的大補帖出來。不然找到的不是不全,就是以殘體字為主的半殘型態,很難有參考價值。

  1. 關於GUI上的連動要怎麼設計? 筆者是善用Group Box所帶來的好處

先看效果

作法

(取消)勾選checkbox

  • 直接使用statechanged就可以來判斷狀態 [Source Code (上)]
  • 連接到相對應的function (chkAutoRes/ chkTr) [Source Code (下)]
    • 將state 值傳入後,使用QtCore.Qt.Checked做判斷勾選及取消勾選時的應對方式
    • 依照狀態判斷是否啟用Group Box
    • 將config資料夾中的檔案列表取檔名並直接列在下拉式選單中
    • 使用Label 做會發亮的指標

Source Code (上)

from PySide2 import QtGui, QtCore
class MainWindow(QMainWindow):

    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        ....
        ....
        self.ui.chk_autoRes.stateChanged.connect(self.chkAutoRes)
        self.ui.chk_iotr.stateChanged.connect(self.chkTr)
        ....
        ....

Source Code (下)

    def chkTr(self, state):
        if state == QtCore.Qt.Checked:
            self.ui.label_translate.setStyleSheet("background-color: aqua")
            self.ui.label_translate.setText(" Translate")
            self.ui.grb_translate.setEnabled(True)
            tProfiles = self.fn.listdir(".\\config")
            if not transProfiles is None:
                for idx in range(len(tProfiles)):
                    if "t_" in transProfiles[idx]:
                        self.ui.cmb_tProfile.addItem(tProfiles[idx][6:-5])
        else:
            self.ui.label_tlate.setStyleSheet("")
            self.ui.label_tlate.setText("")
            self.ui.cmb_tProfile.clear()
            self.ui.grb_tlate.setEnabled(False)
            self.ui.cmb_tlate.setCurrentText("")
def chkAutoRes(self, state):
    if state == QtCore.Qt.Checked:
        self.ui.grb_autoRes.setEnabled(True)
        f_UsrCMDSet = self.fn.listdir(".\\config")
        if not f_UsrCMDSet is None:
            for idx in range(len(f_UsrCMDSet)):
                if "f_" in f_UsrCMDSet[idx]:
                    self.ui.cmb_fUserConfig.addItem(f_UsrCMDSet[idx][5:-5])
    else:
        self.ui.grb_autoRes.setEnabled(False)
        self.ui.cmb_f_UserConfig.clear()
  1. 何時需要使用Grid 去做排版? Grid 是一定要用的嗎?
    [Ans] 很多Python GUI程式相關的教學中都會特別提到Grid 這部分一定要放在最下面那層才可以,但經由筆者研究pyside2 後發現,除非想要做到不同解析度或程式可以藉由拖拉的方式做放大縮小功能,不然是可以不需要使用Grid 進行Layout相關的設計

  2. 要如何防止在Grid 上面設計時,每次使用的元件外觀大小都會變形的問題及如何快速把沒有Grid Layout的UI版面加入這個樣式設計?
    [Ans]

    • 筆者是在不想變形的地方使用Groupbox 的形式, 可以從下面的效果中觀察到 有使用Groupbox 內的元件即使拖拉到Grid中也不會被隨意改變外觀,但由於按鈕沒有放置在Gropbox中就會被強制改變外觀大小
    • 開一個空白的UI文件檔就可以進行快速搬移
      • 先把UI的大小設定成跟舊的一樣
      • 拖拉Grid Layout 到舊的版面,拖拉到適當大小後選擇複製
      • 貼到新的UI版面上
      • 選擇並複製需要搬移的元件
      • 貼到新的UI版面上再做細部微調

效果如下:

  1. Label 要怎麼做成會發光的指標

作法:

  • UI 上先設定一個空白的Label 標籤,不設定背景顏色
  • 當Checkbox 被勾選時
    • 指定Label的背景顏色
    • 設定文字
  • checkbox 取消勾選
    • 清楚Label的背景顏色
    • 設定文字為空

效果如下:

Source Code

if state == QtCore.Qt.Checked:
    self.ui.label_autoRes.setStyleSheet("background-color: aqua")
    self.ui.label_autoRes.setText("Auto Res")
else:
    self.ui.label_autoRes.setStyleSheet("")
    self.ui.label_autoRes.setText("")

StyleSheet實際上就是一個UI文件中的樣式設計語法,其有非常多設定,但其實常用的就那幾種而已 例如: 前(後)景顏色,邊框 ....
這邊只有介紹顏色的簡單應用

參考資料


上一篇
純手工打造UART版資料清洗工具 之 com0com for win10 x64 工具介紹
下一篇
純手工打造UART版資料清洗工具之 PySide2 GUI 大補帖 - Part B
系列文
Python GUI 專案設計模式及好用的開發技巧31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言